<template>
  <div class="error-card__wrap">
    <div class="error-card" v-if="error.statusCode !== 404">
      <img src="../assets/svg/500.svg" alt="">
      <p class="error-card-content">服务器连接异常，请稍后重试</p>
      <button class="error-card-close" @click="close">关闭页面</button>
    </div>
      <error-card v-if="error.statusCode === 404"></error-card>
  </div>
</template>

<script>
import ErrorCard from '../components/pc/errorCard';
export default {
  props: ['error'],
  layout: 'blank',
  components: {
    ErrorCard
  },

  created() {

  },
  methods:{
    close(){
      window.opener = null;
      window.open("http://www.baidu.com", "_self");
      window.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.error-card__wrap{

  position: fixed;
  top: 0;
  bottom:0;
  width: 100%;
  text-align: center;
  @extend %flex-row-center;
  background-image: $bgImage;

  .error-card{
    margin: 0 auto;
    img{
      display: inline-block;
    }
    .error-card-content{
      padding-top: 37*$length;
      padding-bottom: 47*$length;
      @include fontStyle(16,22,500,#333,center);
    }
    .error-card-close{
      display: inline-block;
      width: 148*$length;
      height: 48*$length;
      line-height: 48*$length;
      font-size: 14*$length;
      color: #fff;
      background-color: #75D098;
      @include border-radius(4*$length);
      cursor: pointer;
      border: none;
      @extend %animate-transition;
      &:hover{
        background-color: #7f828b;
      }
    }
  }
}
</style>
